<template>
    <div class="feedback-container">
      <!-- 搜索表单 -->
      <el-form inline class="search-form">
        <el-form-item label="反馈类型">
          <el-select v-model="params.type" placeholder="全部类型" clearable>
            <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        
        <el-form-item label="反馈状态">
          <el-select v-model="params.status" placeholder="全部状态" clearable>
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        
        <el-form-item label="反馈时间">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
  
      <!-- 反馈列表 -->
      <el-table
        :data="feedbackList"
        v-loading="loading"
        border
        style="width: 100%"
      >
        <el-table-column prop="feedbackId" label="ID" width="80" />
        <el-table-column prop="type" label="类型" width="120">
          <template #default="{ row }">
            <el-tag :type="getTypeTagType(row.type)">
              {{ getTypeLabel(row.type) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="content" label="反馈内容" show-overflow-tooltip />
        <el-table-column prop="contact" label="联系方式" width="150" />
        <el-table-column prop="nickName" label="反馈人" width="120" />
        <el-table-column prop="createTime" label="反馈时间" width="180" />
        <el-table-column prop="status" label="状态" width="120">
          <template #default="{ row }">
            <el-tag :type="getStatusTagType(row.status)">
              {{ getStatusLabel(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
          <template #default="{ row }">
            <el-button type="text" @click="handleDetail(row)">详情</el-button>
            <el-button 
              type="text" 
              @click="handleProcess(row)"
              v-if="row.status === '0'"
            >
              处理
            </el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 分页 -->
      <el-pagination
        v-model:current-page="params.pageNum"
        v-model:page-size="params.pageSize"
        :total="total"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
  
      <!-- 反馈详情对话框 -->
      <el-dialog v-model="detailVisible" title="反馈详情" width="50%">
        <el-descriptions :column="1" border>
          <el-descriptions-item label="反馈ID">{{ currentFeedback.feedbackId }}</el-descriptions-item>
          <el-descriptions-item label="反馈类型">
            <el-tag :type="getTypeTagType(currentFeedback.type)">
              {{ getTypeLabel(currentFeedback.type) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="反馈状态">
            <el-tag :type="getStatusTagType(currentFeedback.status)">
              {{ getStatusLabel(currentFeedback.status) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="联系方式">{{ currentFeedback.contact || '无' }}</el-descriptions-item>
          <el-descriptions-item label="反馈时间">{{ currentFeedback.createTime }}</el-descriptions-item>
          <el-descriptions-item label="反馈内容">
            <div class="feedback-content">{{ currentFeedback.content }}</div>
          </el-descriptions-item>
          <el-descriptions-item label="处理结果" v-if="currentFeedback.status !== '0'">
            {{ currentFeedback.processResult || '无' }}
          </el-descriptions-item>
          <el-descriptions-item label="处理时间" v-if="currentFeedback.status !== '0'">
            {{ currentFeedback.processTime || '无' }}
          </el-descriptions-item>
        </el-descriptions>
        
        <template #footer>
          <el-button @click="detailVisible = false">关闭</el-button>
          <el-button 
            type="primary" 
            @click="handleProcess(currentFeedback)"
            v-if="currentFeedback.status === '0'"
          >
            处理反馈
          </el-button>
        </template>
      </el-dialog>
  
      <!-- 处理反馈对话框 -->
      <el-dialog v-model="processVisible" title="处理反馈" width="40%">
        <el-form :model="processForm" label-width="100px">
          <el-form-item label="反馈类型">
            <el-tag>{{ getTypeLabel(currentFeedback.type) }}</el-tag>
          </el-form-item>
          <el-form-item label="反馈内容">
            <div class="feedback-content">{{ currentFeedback.content }}</div>
          </el-form-item>
          <el-form-item label="处理结果" prop="processResult" required>
            <el-input
              v-model="processForm.processResult"
              type="textarea"
              :rows="4"
              placeholder="请输入处理结果"
            />
          </el-form-item>
        </el-form>
        
        <template #footer>
          <el-button @click="processVisible = false">取消</el-button>
          <el-button type="primary" @click="submitProcess">提交</el-button>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, onMounted, computed } from 'vue'
  import { 
    getFeedbackListService,
    processFeedbackService
  } from '@/apis/feedback'
  import { ElMessage } from 'element-plus'
  
  // 搜索参数
  const params = reactive({
    pageNum: 1,
    pageSize: 10,
    type: null,
    status: null,
    startTime: null,
    endTime: null
  })
  
  // 日期范围
  const dateRange = ref([])
  
  // 列表数据
  const feedbackList = ref([])
  const total = ref(0)
  const loading = ref(false)
  
  // 对话框控制
  const detailVisible = ref(false)
  const processVisible = ref(false)
  const currentFeedback = ref({})
  
  // 处理表单
  const processForm = reactive({
    feedbackId: null,
    processResult: ''
  })
  
  // 选项数据
  const typeOptions = [
    { label: '功能建议', value: 'suggestion' },
    { label: '问题反馈', value: 'bug' },
    { label: '其他问题', value: 'other' }
  ]
  
  const statusOptions = [
    { label: '未处理', value: '0' },
    { label: '已处理', value: '1' }
  ]
  
  // 计算属性 - 处理日期范围
  const computedDateRange = computed(() => {
    if (dateRange.value && dateRange.value.length === 2) {
      params.startTime = dateRange.value[0]
      params.endTime = dateRange.value[1]
    } else {
      params.startTime = null
      params.endTime = null
    }
  })
  
  // 获取反馈列表
  const getFeedbackList = async () => {
    try {
      loading.value = true
      const res = await getFeedbackListService(params)
      feedbackList.value = res
      total.value = res.total
    } catch (error) {
      console.error('获取反馈列表失败:', error)
      ElMessage.error('获取反馈列表失败')
    } finally {
      loading.value = false
    }
  }
  
  // 初始化加载数据
  onMounted(() => {
    getFeedbackList()
  })
  
  // 分页处理
  const handleSizeChange = (val) => {
    params.pageSize = val
    params.pageNum = 1
    getFeedbackList()
  }
  
  const handleCurrentChange = (val) => {
    params.pageNum = val
    getFeedbackList()
  }
  
  // 搜索和重置
  const handleSearch = () => {
    params.pageNum = 1
    computedDateRange.value
    getFeedbackList()
  }
  
  const handleReset = () => {
    params.pageNum = 1
    params.pageSize = 10
    params.type = null
    params.status = null
    params.startTime = null
    params.endTime = null
    dateRange.value = []
    getFeedbackList()
  }
  
  // 查看详情
  const handleDetail = (row) => {
    currentFeedback.value = { ...row }
    detailVisible.value = true
  }
  
  // 处理反馈
  const handleProcess = (row) => {
    currentFeedback.value = { ...row }
    processForm.feedbackId = row.feedbackId
    processForm.processResult = ''
    processVisible.value = true
  }
  
  // 提交处理
  const submitProcess = async () => {
    try {
      if (!processForm.processResult) {
        ElMessage.warning('请输入处理结果')
        return
      }
      
      await processFeedbackService({
        feedbackId: processForm.feedbackId,
        processResult: processForm.processResult
      })
      
      ElMessage.success('处理成功')
      processVisible.value = false
      getFeedbackList()
      
      if (detailVisible.value) {
        currentFeedback.value.status = '1'
        currentFeedback.value.processResult = processForm.processResult
        currentFeedback.value.processTime = new Date().toLocaleString()
      }
    } catch (error) {
      console.error('处理反馈失败:', error)
      ElMessage.error('处理反馈失败')
    }
  }
  
  // 辅助函数 - 获取标签类型和文本
  const getTypeLabel = (type) => {
    const item = typeOptions.find(item => item.value === type)
    return item ? item.label : '未知'
  }
  
  const getTypeTagType = (type) => {
    const map = {
      1: '',
      2: 'warning',
      3: 'danger',
      4: 'info'
    }
    return map[type] || 'info'
  }
  
  const getStatusLabel = (status) => {
    const item = statusOptions.find(item => item.value === status)
    return item ? item.label : '未知'
  }
  
  const getStatusTagType = (status) => {
    const map = {
      0: 'warning',
      1: 'success',
      2: 'info'
    }
    return map[status] || 'info'
  }
  </script>
  
  <style scoped>
  .feedback-container {
    padding: 20px;
  }
  
  .search-form {
    margin-bottom: 20px;
  }
  
  .feedback-content {
    white-space: pre-wrap;
    line-height: 1.6;
  }
  
  .el-pagination {
    margin-top: 20px;
    justify-content: flex-end;
  }
  </style>